Lists component
Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
Unordered List with bullets
To use unordered list with bullets add class name styled-listinside the ul tag. For different variants of bullet add class names accordingly list-style-circle, list-style-squareif variant is not provided default variant would be used.
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
Ordered List with bullets
To use ordered list with bullets add class name styled-listinside the ol tag. For different variants of order add class names accordingly list-style-lowercase, list-style-uppercase, list-style-lowercase-roman,list-style-uppercase-roman if variant is not provided default variant would be used. To reverse the order of ordered list, add reversed attribute to ol tag.
- list item with number
- list item with number
- list item with number
- Reversed list item
- Reversed list item
- Reversed list item
- List item with lowercase alphabets
- List item with lowercase alphabets
- List item with lowercase alphabets
- List item with uppercase alphabets
- List item with uppercase alphabets
- List item with uppercase alphabets
- List item with lowercase roman number
- List item with lowercase roman number
- List item with lowercase roman number
- List item with uppercase roman number
- List item with uppercase roman number
- List item with uppercase roman number
List with no bullets
If you want list stacked but with no bullet and indentation, then you may use this component. To use list with no bullets add class name list-style-none
- list item 1
- list item 2
- list item 3
List with inline items
If you want list items in same line instead of stacked, then you may use this component. To use list with inline items add class name list-inline
- item 1
- item 2
- item 3
List with icon
To use list with icon add class name list-style-icon along with the icon.
Basic List
Copy below code and put your desired text and icon and you are good to go.
Nested List
Copy below code and put your desired text and icon and you are good to go.
Folder List
Copy below code and put your desired text and icon and you are good to go.
Stacked List (Notification Page)
Copy below code and put your desired text and icon and you are good to go.
